/**
 * Created by hansin on 2017/8/26.
 */
import React, {
    Component
} from 'react'
import {
    connect
} from 'react-redux';
import LazyLoad from 'react-lazyload'
import PlaceholderComponent from '../../Placeholder'
import {getCookie} from '../../../static/js/global'

import Row from 'antd/lib/row';
import Col from 'antd/lib/col';
import Button from 'antd/lib/button';



class FollowPage extends Component {
    state = {
        show: false,
        couponId: null
    }


    handleFollow = () =>{
        let shopId = getCookie('shopId');
        let url = `http://www.onloon.net/landing/pc_CouponPage.html?shopId=${shopId}&id=${this.state.couponId}`;
        window.open(url, '', '')
    }

    componentDidMount(){
        this.props.getFollowInfo()
        .then((res)=>{
            if (res && res.data && res.data.success && res.data.data) {
                this.setState({
                    show: true,
                    couponId: res.data.data
                })
            }
        })
    }

    render() {
        const btnStyle = {
            top: "30%",
            right: "4%",
            backgroundColor: "transparent",
            borderColor: "transparent",
            color: '#333',
            width: 100,
            height: 50,
        }

        //判断是否设置了加粉助手，如果未设置，返回null
        if (this.state.show) {
            return (<div className="follow-page">
                        <Row >
                            <Col onClick={this.handleFollow} className="follow-page-img-box" span={20} offset={2}>
                                <LazyLoad offset={[-200, 0]} placeholder={<PlaceholderComponent />} >
                                    <a target="_blank" href={'javaScript:void(0);'}>
                                        <img className="follow-img" src='../../../static/img/followus.png'/>
                                    </a>
                                </LazyLoad>
                                {/*<Button onClick={this.handleFollow} style={btnStyle} className="follow-page-btn" size="large" type="primary">Follow Us</Button>*/}
                            </Col>
                        </Row>
                    </div>)
        } else {
            return null
        }

    }
}


export default FollowPage